<template>
  <!-- 菜单区域 -->
  <div class="mymenu">
    <ul class="mymenuul"  >
      <li >
        <img src="@/assets/mu1.png" class="munlogo" >&nbsp;
        直播
      </li>
      <li >
        <img src="@/assets/mu2.png" class="munlogo" >&nbsp;
        文章
      </li>
      <li >
        <img src="@/assets/mu3.png" class="munlogo" >&nbsp;
        音画
      </li>
      <li >
        <img src="@/assets/mu4.png" class="munlogo" >&nbsp;
        短视频
      </li>
      <li >
        <img src="@/assets/mu5.png" class="munlogo" >&nbsp;
        视频
      </li>
      <li >
        <img src="@/assets/mu6.png" class="munlogo" >&nbsp;
        动态
      </li>
      <li >
        <img src="@/assets/mu7.png" class="munlogo" >&nbsp;
        排行榜
      </li>

    </ul>

  </div>


</template>

<script>
  export default {
    name: 'mymenu',
    data () {
      return {
        msg: 'mymenu'
      }
    }
  }
</script>

<style scoped>
  .mymenu{
    margin-top:20px;
    width:90%;
    min-height:100px;
  }
  .mymenuul {
    list-style:none;
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
  }

  .mymenuul li {
    float:left;
    list-style:none;
    width:120px;
    height: 54px;
    line-height:54px;
    margin: 20px;
    display: flex;
    align-items: center;
    text-align: center;
  }
  .munlogo{
    width:54px;
    height:54px;
  }

</style>
